<template>
  <div>
    <!-- 引入列表组件 -->
    <Table ref="myTable" :tableTitles="titles" :url="this.utils.myurl.hotelList"/>
    <div style="text-align: left; margin: 20px;">
      <Power power="/HotelInsert">
        <el-button type="primary" @click="dialogFormVisible = true">新增酒店</el-button>
      </Power>
    </div>

    <!-- dialog弹出框的内容 -->
    <el-dialog title="新增酒店" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="酒店名称" label-width="120px">
          <el-input v-model="hotelName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在城市" label-width="120px">
          <el-select v-model="cityId" @change="selectChange()" clearable placeholder="请选择">
              <el-option
                v-for="item in cityList"
                :key="item.cid"
                :label="item.cityName"
                :value="item.cid">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行政区域" label-width="120px">
          <el-input autocomplete="off" v-model="hotelRegx"></el-input>
        </el-form-item>
        <el-form-item label="酒店图片" label-width="120px">
          <el-upload
            class="upload-demo"
            name="file"
            :action="this.utils.myurl.uploadUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="updateSuccess"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-button type="primary" @click="openMap()">打开地图</el-button>
        <br/>
        <br/>
        <el-form-item label="经度" label-width="120px">
          <el-input autocomplete="off" v-model="lng"></el-input>
        </el-form-item>
        <el-form-item label="纬度" label-width="120px">
          <el-input autocomplete="off" v-model="lat"></el-input>
        </el-form-item>
        <el-form-item label="酒店地址" label-width="120px">
          <el-input autocomplete="off" v-model="address"></el-input>
        </el-form-item>
        <el-form-item label="星级" label-width="120px">
          <el-input autocomplete="off" v-model="hotelStar"></el-input>
        </el-form-item>
        <el-form-item label="关键词" label-width="120px">
          <el-input autocomplete="off" v-model="keywords"></el-input>
        </el-form-item>
        <el-form-item label="酒店描述" label-width="120px">
          <el-input autocomplete="off" v-model="hotelContent"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertHotel()">添 加</el-button>
      </div>
    </el-dialog>

    <!-- 百度地图的弹出框 -->
    <el-dialog title="地图" :visible.sync="dialogMapVisible" @opened="openMapDialog()">
      <!-- 百度地图 -->
      <div id="container"></div>
    </el-dialog>
  </div>
</template>

<script>
  import Table from './Table.vue'

  export default {
    name: "HotelManager",
    components: {Table},
    methods: {
      //下拉框改变事件
      selectChange(){
        var citys = this.cityList;
        for(var i = 0; i < citys.length; i++){
          if(citys[i].cid == this.cityId){
            this.cityName = citys[i].cityName + '市';
          }
        }
      },
      handleRemove(file, fileList) {
              console.log(file, fileList);
      },
      handlePreview(file) {
              console.log(file);
      },
      //上传图片
      updateSuccess(file){
        if(file.code == 200){
          this.$message.success("图片上传成功！");
          this.fileList.push(file.data);
          console.log(this.fileList);
        } else {
          this.$message.error(file.msg);
        }
      },
      //获取城市下拉列表
      getCityList(){
        var vt = this;
        this.utils.myajax({
          type: "GET",
          url: this.utils.myurl.cityList,
          success: function(data){
            vt.cityList = data;
          }
        })
      },
      //打开百度地图-弹出框
      openMap(){
        this.dialogMapVisible = true;
      },
      //mapdialog打开的回调事件
      openMapDialog(){
         this.initBaiduMap();
      },
      //初始化百度地图
      initBaiduMap(){
        //标准的经纬度坐标系 - Google
        //中国所有的地图-加偏-火星坐标 - 高德地图、腾讯地图、搜狗地图、Bing地图
        //百度地图 - 百度坐标
        var vt = this;
        var map = new BMapGL.Map("container");
        map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
        map.centerAndZoom(this.cityName, 12);
        //创建逆地址解析的对象
        var geoc = new BMapGL.Geocoder();
        map.addEventListener('click', function(e) {
          map.clearOverlays();
          var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
          // 创建点标记
          var marker1 = new BMapGL.Marker(point);
          // 在地图上添加点标记
          map.addOverlay(marker1);
          vt.lng = e.latlng.lng;
          vt.lat = e.latlng.lat;

          //进行逆地址解析
          geoc.getLocation(point, function(rs){
            var addComp = rs.addressComponents;
            vt.address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
          })
        });
      },
      //添加城市
      insertHotel(){
        var vt = this;
        this.utils.myajax({
          type: "POST",
          url: this.utils.myurl.hotelInsert,
          data: {
            hotelName: this.hotelName,
            cId: this.cityId,
            hotelImages: JSON.stringify(this.fileList),
            hotelLon: this.lng,
            hotelLat: this.lat,
            hotelAddress: this.address,
            hotelLevel: this.hotelStar,
            hotelKeyword: this.keywords,
            hotelRegx: this.hotelRegx,
            hotelContent: this.hotelContent
          },
          success: function(data){
            vt.$message.success("酒店添加成功！");
            vt.$refs.myTable.goPage();
          }
        });
      }
    },
    data() {
      return {
        hotelName: "",
        cityId: "",
        cityName: "",
        fileList: [
        ],
        cityList: [
        ],
        lng: "",
        lat: "",
        address: "",
        hotelStar: "",
        keywords:"",
        hotelRegx:"",
        hotelContent:"",
        //隐藏dialog
        dialogFormVisible: false,
        //地图的弹出框隐藏属性
        dialogMapVisible: false,
        titles: [
          {
            prop: 'hid',
            label: 'id',
            width: '50',
            fixed: true
          },{
            prop: 'cityName',
            label: '所在城市',
            width: '100',
            fixed: false
          },{
            prop: 'hotelName',
            label: '酒店名称',
            width: '250',
            fixed: false
          },{
            prop: 'hotelImages',
            label: '酒店图片',
            width: '300',
            fixed: false,
            type: "image"
          },{
            prop: 'hotelAddress',
            label: '酒店地址',
            width: '200',
            fixed: false
          },{
            prop: 'hotelStar',
            label: '评分',
            width: '100',
            fixed: false
          }
        ]
      }
    },
    mounted(){
      this.getCityList();
    }
  }
</script>

<style>
   #container{
     height: 500px;
     width: 600px
   }
</style>
